<template>
  <view v-if="shenheStatus == 0" class="complete">
    <view class="head">
      <view class="title" v-if="status == 0">
        <!-- <image src="../images/complete.png"></image> -->
        <text>便于获取用户手机号权限</text>
      </view>
			<block v-else-if="status == 1">
				<view>
					<view class="icon-box">
					  <i
					    class="iconfont icon-clock-fill"
					  ></i>
					</view>
				</view>
				<view class="status-text">正在审核中</view>
				<view class="status-info">正在审核，请耐心等待</view>
			</block>
			
			<block v-else-if="status == 2">
				<view>
					<view class="icon-box">
						<i
							class="iconfont icon-reeor-fill"
						></i>
					</view>
				</view>
				<view class="status-text">审核失败</view>
				<view class="status-info">信息错误，请检查后重试</view>
			</block>
    </view>
    <view class="content">
      <aliGetPhone
        v-if="storeInfo.progress == 4"
        :bind_store_id="bind_store_id"
        :mini_id="storeInfo.mini_id"
        :status="storeInfo.status"
				:progress="storeInfo.progress"
				:info="storeInfo.data"
				:field="storeInfo.field"
        @submit="getCompleteInfo()"
				@showTitle="showTitle"
      ></aliGetPhone>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import aliGetPhone from '../components/aliGetPhone.vue';
export default {
  components: {
    aliGetPhone,
    Shenhe,
  },
  data() {
    return {
      bind_store_id: '',
      storeInfo: {},
			mini_id:0,
			status:0
    };
  },
  onLoad(option) {
    if (option.id) {
      this.bind_store_id = option.id;
			this.mini_id = option.mini_id;
      this.getCompleteInfo();
    }
  },
  methods: {
		showTitle(params){
			this.status = params
		},
    changeCurrentCat(params){
      this.storeInfo.data.categories = params;
    },
    // 获取小程序完善信息
    async getCompleteInfo() {
      const res = await this.$allrequest.newStore.getAliProgress(
        {
          bind_store_id: this.bind_store_id,
        },
        true
      );
      if (res.code == 0) {
        this.storeInfo = res.data;
				let store_id = this.bind_store_id;
				let status = 0;
				if (res.data.progress == 6) {
					status = 3;
				} 
				if (res.data.progress < 4) {
					status = 2;
				}
				if (res.data.progress == 5) {
					status = 1;
				}
				if (res.data.progress != 4) {
					this.$utils.toUrl(`/new_store/main/result?type=2&status=${status}&id=${res.data.bind_store_id}`, 'navigateTo');
				}
      }
    },
	copyUrl(url) {
		uni.setClipboardData({
			data: url,
			success: function () {
				uni.showTabBar({
					title: '复制成功',
					icon: 'none'
				})
			},
			fail() {
				uni.showTabBar({
					title: '复制失败',
					icon: 'none'
				})
			}
		});
	}
  },
};
</script>

<style lang="less" scoped>
.complete {
  color: #262626;
  font-family: PingFang SC;
  .head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40rpx;
    padding-bottom: 24rpx;
    border-bottom: 24rpx solid #f2f2f2;
    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 30rpx;
      image {
        width: 104rpx;
        height: 90rpx;
        margin-bottom: 20rpx;
      }
    }
		view {
			.icon-box {
			  width: 130rpx;
			  height: 130rpx;
			  background: #ffffff;
			  border-radius: 50%;
			  margin: 0 auto;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  .iconfont {
			    color: #f0250e;
			    font-size: 190rpx;
			  }
			}
		}
		.status-text {
		  font-size: 40rpx;
		  font-family: PingFang SC;
		  font-weight: 600;
		  color: #262626;
		  margin-top: 32rpx;
		}
		.status-info {
		  font-size: 30rpx;
		  font-family: PingFang SC;
		  font-weight: 400;
		  color: #8c8c8c;
		  margin-top: 20rpx;
		}
    .steps {
      width: 100%;
      display: flex;
      margin-top: 40rpx;
      padding: 0 60rpx;
      .stepItem {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .circle {
          width: 34rpx;
          height: 34rpx;
          border-radius: 50%;
          background-color: #f2f2f2;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 26rpx;
          text {
            display: block;
            width: 18rpx;
            height: 18rpx;
            border-radius: 50%;
            background-color: #bababd;
          }
        }
        ::before {
          content: '';
          position: absolute;
          width: calc(50% - 17rpx);
          height: 2rpx;
          background-color: #e6e6e6;
          top: 17rpx;
          left: 0;
        }
        ::after {
          content: '';
          position: absolute;
          width: calc(50% - 17rpx);
          height: 2rpx;
          background-color: #e6e6e6;
          top: 17rpx;
          left: calc(50% + 17rpx);
        }
      }
      .stepItem:nth-child(1) {
        ::before {
          height: 0;
        }
      }
      .stepItem:last-child {
        ::after {
          height: 0;
        }
      }
      .choosed {
        .circle {
          background-color: #fdf1f0;
          text {
            background-color: #f0250e;
          }
        }
      }
    }
    .reason {
      width: 702rpx;
      margin-top: 24rpx;
      padding: 24rpx;
      background-color: #f8f8f8;
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      text:nth-child(1) {
        font-weight: 500;
        margin-bottom: 10rpx;
      }
      text:nth-child(2) {
        color: #f0250e;
      }
    }
  }
  .success {
    display: flex;
    padding-top: 100rpx;
    font-size: 24rpx;
    color: #8c8c8c;
    justify-content: center;
  }
}
</style>
